<template>
  <div v-smooth-scroll="{ speed: 30, hoverPause: true }" class="scroll-container">
    <table class="auto-scroll-table">
      <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      headers: ["姓名", "年龄", "性别"],
      data: [
        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },
        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },

        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },
        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },
        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },
        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },
        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },

        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },
        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },
        { name: "1", age: 25, gender: "男" },
        { name: "2", age: 30, gender: "女" },
      ],
    };
  },
});
</script>

<style scoped>
.scroll-container {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.auto-scroll-table {
  width: 100%;
  border-collapse: collapse;
}

.auto-scroll-table tbody {
  display: block;
  will-change: transform;
}
</style>
